<template>
	<view style="height: 384rpx">
		<l-echart ref="chartRef" @finished="init"></l-echart>
	</view>
</template>

<script setup>
	// vue3 setup
	import {
		ref
	} from 'vue'
	import * as echarts from 'echarts'
	import registerWordcloud from '@/uni_modules/lime-echart-wordcloud'
	registerWordcloud(echarts)
	const chartRef = ref(null)

const props = defineProps(['data'])
	const init = async () => {
		const chart = await chartRef.value.init(echarts)
		chart.setOption({
			series: [{
				type: 'wordCloud',
				// 由于许多平台无法创建离屏canvas，故在lime-chart里使用canvas标签，但由于生成的数据为异步。所以需要设置等待时间。
				wait: 100,
				shape: 'diamond',
				left: 'center',
				top: 'center',
				sizeRange: [12, 80],
				rotationRange: [-45, 90],

				width: "100%",
				height: "100%",
				right: null,
				bottom: null,
				maskImage: "",
				textPadding: 0,

				rotationStep: 45,
				gridSize: 8,
				drawOutOfBound: false,
				layoutAnimation: true,
				textStyle: {
					fontFamily: 'ShiShangZhongHeiJianTi, ShiShangZhongHeiJianTi',
					fontWeight: '300',
					color: function() {
						// Random color
						return 'rgb(' + [
							Math.round(Math.random() * 160),
							Math.round(Math.random() * 160),
							Math.round(Math.random() * 160)
						].join(',') + ')';
					}
				},
				emphasis: {
					focus: 'self',
					textStyle: {
						shadowBlur: 10,
						shadowColor: '#333'
					}
				},

				data: props.data
			}]
		});
	}
</script>